<template>
    <div class="col-md-7">
        <h2 v-show="cts.length===0">快来评论帅气的你吧！</h2>
        <ul class="list-group" v-show="cts.length>0">
            <li class="list-group-item" v-for="(user,index) in cts" :key="index">
                <button type="button" @click="deleteContent(index)" class="close" aria-label="Close" style="position: relative;right: 1%">
                    <span style="color: red">&times;</span>
                </button>
                <div class="panel panel-info">
                    <div class="panel-heading">{{user.name}}</div>
                    <div class="panel-body">
                        {{user.content}}
                    </div>
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        name: "CommentList",
        // 用来接收父组件的数据
        props:{cts:Array},
        data(){
            return{
                isContent:true,
            }
        },
        methods:{
            deleteContent:function (index) {
                this.cts.splice(index)
            }
        }
    }
</script>

<style scoped>

</style>